<template>
  <div>
    <el-row style="height: 706px">
      <el-col :span="5">
        <div>
          <el-row
            style="
              height: 40px;
              display: flex;
              align-items: center;
              border-bottom: 2px solid #eef0f6;
            "
          >
            <el-col :span="16">
              <div style="font-size: 15px; margin-left: 10px">在线客服</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <i class="el-icon-setting"></i>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <i class="el-icon-user"></i>
              </div>
            </el-col>
          </el-row>
          <el-row
            style="
              height: 40px;
              display: flex;
              align-items: center;
              border-bottom: 2px solid #f5f5f7;
            "
          >
            <el-col :span="4">
              <div style="font-size: 12px; margin-left: 10px">我的</div>
            </el-col>
            <el-col :span="5">
              <div style="font-size: 12px" class="grid-content bg-purple-light">
                同事
              </div>
            </el-col>
          </el-row>
          <div
            class="a"
            :style="{ 'background-color': item.id === obj.to ? 'red' : '' }"
            v-for="item in users"
            :Key="item"
            @click="turn(item.id)"
          >
            <el-image
              style="
                width: 40px;
                height: 40px;
                margin-left: 15px;
                margin-top: 6px;
              "
              :src="user.image"
              >hi</el-image
            >
            <div style="margin-left: 20px">
              <div>
                用户{{ item.id }}
                <span
                  style="font-size: 12px; color: #bebebe; margin-left: 58px"
                  >{{ item.nowTime }}</span
                >
              </div>
              <div
                style="
                  font-size: 12px;
                  color: #acaaaa;
                  margin-top: 5px;
                  width: 140px;
                  overflow: hidden;
                "
              >
                {{ item.msg }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="19" style="background-color: #eef0f6; height: 706px">
        <div>
          <el-main style="height: 550px">
            <div>
              <!-- <div style="background-color: aqua;">用户{{ obj.to }}</div> -->
              <div class="chat-container" v-for="item in msgs" :key="item.idd">
                <div
                  class="message self"
                  style="display: flex"
                  v-if="item.type === '2'"
                >
                  <p v-html="item.msg"></p>
                  <el-image
                    style="
                      width: 40px;
                      height: 40px;
                      margin-left: 15px;
                      margin-top: 6px;
                    "
                    :src="user.image"
                    >hi</el-image
                  >
                </div>
                <div
                  class="message other"
                  style="display: flex"
                  v-if="item.type === '1' && Number(item.id) === Number(obj.to)"
                >
                  <el-image
                    style="
                      width: 40px;
                      height: 40px;
                      margin-right: 15px;
                      margin-top: 6px;
                    "
                    :src="user.image"
                    >hi</el-image
                  >
                  <p>{{ item.msg }}</p>
                </div>
                <!-- 更多消息... -->
              </div>
            </div>
          </el-main>
          <el-footer style="background-color: #fef9f9; height: 150px">
            <!-- <i class="el-icon-user"></i>
                        <i class="el-icon-wallet"></i>
                        <i class="el-icon-chat-line-round"></i> -->
            <textarea
              rows="6"
              style="
                border: none;
                border: solid 0px;
                outline: none;
                width: 98%;
                background-color: #fef9f9;
                margin-top: 15px;
              "
              placeholder="请输入内容"
            />
            <el-button
              type="primary"
              size="small"
              style="margin-left: 90%"
              @click="sent"
              >发送</el-button
            >
          </el-footer>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Cookies from "js-cookie";
export default {
  name: "Chat",
  data() {
    return {
      userPrc:
        "https://img0.baidu.com/it/u=1604526552,545195808&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      msg: "",
      websocket: "",
      users: [],
      msgs: [],
      user: "",
      obj: {
        id: "1",
        msg: "",
        type: "2",
        to: "",
      },
    };
  },
  created() {
    var user = Cookies.get("kefu");
    this.user = JSON.parse(user);
    this.$http.get("/user/getUser").then((res) => {
      if (res.data !== "" && res.data !== null) {
        this.users = res.data;
      }
    });
    var that = this;
    this.websocket = new WebSocket(
      "ws://39.98.162.10:8001/websocket/" + this.obj.id + "/0"
    );
    this.websocket.addEventListener("message", function (e) {
      var data = JSON.parse(e.data);
      if (data.type === "3") {
        that.users.unshift(data);
        that.obj.to = data.id;
        that.users = that.users
          .reduce((accumulator, current) => {
            return accumulator.find((item) => item.id === current.id)
              ? accumulator
              : [...accumulator, current];
          }, [])
          .filter((obj) => obj.id !== Number(that.obj.id));
        var param = {
          users: that.users,
        };
        that.$http.post("/user/setUser", param).then((res) => {});
      } else if (data.type === "1") {
        var data = JSON.parse(e.data);
        that.obj.to = Number(data.id);
        that.msgs.push(data);
      }
    });
  },
  methods: {
    turn(id) {
      this.obj.to = id;
      this.$http.get("/kefu/chavoByid?id=" + id).then((res) => {
        this.msgs = res.data;
      });
    },
    getMsgsById() {
      that.msgs.filter((item) => item.to === obj.to);
    },
    sent() {
      var input = document.querySelector("textarea").value;
      this.obj.msg = input;
      // this.msgs.push(this.obj);
      this.msgs.push(JSON.parse(JSON.stringify(this.obj)));
      this.insertMsg(this.obj);
      document.querySelector("textarea").value = "";
      this.websocket.send(JSON.stringify(this.obj));
    },
    insertMsg(item) {
      this.$http.post("/kefu/insertMsg", item).then((res) => {});
    },
  },
};
</script>
<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;

  margin: 0 auto;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  max-width: 40%;
}

.message.self {
  background-color: #e0f7fa;
  align-self: flex-end;
  text-align: right;
}

.message.other {
  background-color: #f9f9f9;
  align-self: flex-start;
  text-align: left;
}
.a {
  height: 60px;
  border-bottom: 2px solid #fbf7f7;
  display: flex;
  align-items: center;
}
</style>